<style lang="less" scoped>
  .doctor-treat{
    width: 100%;
    height: 100%;
    &_title{
      height: 40px;
      background: url('~@/images/contenttitle.png');
      background-repeat: no-repeat;
      background-position: bottom;
      text-align: center;
      color: #00F6FF;
      line-height: 40px;
      margin-bottom: 5px;
    }
    &_content{
      height: calc(100% - 45px);
      position: relative;
      #doctorTreat2{
        height: 100%;
      }
      .select-style{
        width: 120px;
        position: absolute;
        top: 0;
        right: 0;
      }
    }
    /deep/ .el-select-dropdown{
      background-color: #59BCFB00;
      color: #fff
    }
    /deep/.el-input__inner{
      background-color: #fff0;
      color: #fff;
      border: 1px solid #59BCFB;
    }
  }
</style>

<template>
  <div class="doctor-treat">
    <div class="doctor-treat_title">
      <span>{{ isStrock == 'chestPain' ? '医生手术治疗例数' : isStrock == 'stroke' ? '医生各类手术治疗情况' : '' }}</span>
    </div>
    <div class="doctor-treat_content">
      <div id="doctorTreat2" ref="doctorTreat2" />
      <el-select v-if="isStrock == 'chestPain'" v-model="selectDept" size="mini" class="select-style">
        <el-option v-for="(item, index) in deptList" :key="index" :label="item" :value="item" />
      </el-select>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

import { getDoctorOperationsNum, getStrokeDoctorOperationsNum } from '@/api/comprehensive/doctorTreat'
export default {
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  data() {
    return {
      deptList: [], // 科室列表
      selectDept: '',
      setInter: null
    }
  },
  watch: {
    selectDept(val) {
      this.init()
    },
    'isStrock'() {
      this.init()
    }
  },
  mounted() {
    this.init()
    this.setInter = setInterval(() => {
      this.init()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.setInter)
  },
  methods: {
    init() {
      let myChart = echarts.init(document.getElementById('doctorTreat2'))
      // myChart.showLoading({
      //   text: '',
      //   fontSize: 18,
      //   left: 'center',
      //   color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
      //   textColor: '#fff', // 文字颜色
      //   maskColor: 'rgba(255, 255, 255, 0)' // 背景色
      // })
      console.log(myChart, 'myChart')
      window.addEventListener('resize', myChart.resize)
      if (this.isStrock == 'stroke') {
        getStrokeDoctorOperationsNum({
          hospitalId: this.$store.getters.hospitalId,
          departmentName: this.selectDept
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              let nameList = []
              let numThromData = []
              let numInterventionData = []
              let numNCXData = []
              let numDMLData = []
              let numCEACASData = []
              res.data.forEach(el => {
                nameList.push(el.name)
                numThromData.push(el.numThrom)
                numInterventionData.push(el.numIntervention)
                numNCXData.push(el.numNCX)
                numDMLData.push(el.numDML)
                numCEACASData.push(el.numCEACAS)
              })
              let option = {
                color: ['#59BCFB', '#01EEF6', '#00D59D'],
                legend: {
                  type: 'plain',
                  top: 0,
                  left: 0,
                  itemWidth: 15,
                  itemHeight: 5,
                  icon: 'roundRect',
                  textStyle: {
                    color: '#fff'
                  },
                  formatter: function(name) {
                    return name
                  }
                },
                grid: {
                  top: '25%',
                  letf: '10%',
                  bottom: '20%'
                },
                xAxis: {
                  type: 'category',
                  axisLine: {
                    lineStyle: {
                      color: '#59BCFB33'
                    }
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    interval: 0,
                    color: 'fff',
                    align: 'center',
                    rotate: 10
                  },
                  data: nameList
                },
                yAxis: [{
                  name: '（例）',
                  type: 'value',
                  nameTextStyle: {
                    color: '#fff'
                  },
                  axisLabel: {
                    color: 'fff'
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#59BCFB33'
                    }
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  }
                }],
                tooltip: {
                  trigger: 'axis',
                  textStyle: {
                    color: '#00F6FF'
                  },
                  axisPointer: {
                    type: 'cross',
                    crossStyle: {
                      color: '#999'
                    }
                  },
                  formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />{a3}: {c3}<br />{a4}: {c4}'
                },
                series: [
                  {
                    name: 'AIS溶栓',
                    barWidth: 10,
                    stack: 'treat',
                    label: {
                      show: true,
                      position: 'inside',
                      color: '#fff'
                    },
                    data: numThromData,
                    type: 'bar'
                  },
                  {
                    name: '血管内治疗',
                    barWidth: 10,
                    stack: 'treat',
                    label: {
                      show: true,
                      position: 'inside',
                      color: '#fff'
                    },
                    data: numInterventionData,
                    type: 'bar'
                  },
                  {
                    name: '脑出血',
                    barWidth: 10,
                    stack: 'treat',
                    label: {
                      show: true,
                      position: 'inside',
                      color: '#fff'
                    },
                    data: numNCXData,
                    type: 'bar'
                  },
                  {
                    name: '动脉瘤',
                    barWidth: 10,
                    stack: 'treat',
                    label: {
                      show: true,
                      position: 'inside',
                      color: '#fff'
                    },
                    data: numDMLData,
                    type: 'bar'
                  },
                  {
                    name: 'CEA、CAS治疗',
                    barWidth: 10,
                    stack: 'treat',
                    label: {
                      show: true,
                      position: 'inside',
                      color: '#fff'
                    },
                    data: numCEACASData,
                    type: 'bar'
                  }
                ]
              }
              myChart.setOption(option)
            } else {
              myChart.showLoading({
                text: '暂无数据',
                fontSize: 18,
                left: 'center',
                color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
                textColor: '#fff', // 文字颜色
                maskColor: 'rgba(255, 255, 255, 0)' // 背景色
              })
            }
          }
        })
      }
    }
  }
}
</script>
